<template>
	<div class='abs_rb' style='right:10px;bottom:10px;z-index:100;'><Button  width='80px' style='width: 60px;height:60px' danger shape='circle' label='源码' @click='onTest' /></div>
	<Modal ref='modalRef' title='源码' width='99%' height='99%' :controls='{ ok:{hide:1} }'>
		<div class='code-list'>
			<dl class='code-number'>
				<dt v-for='(v,i) of codeData' :key='i'>{{i+1}}</dt>
			</dl>
			<dl class='code-content'>
				<dd v-for='(v,i) of codeData' :key='i'>{{v}}</dd>
			</dl>
		</div>
	</Modal>
</template>

<script setup>
	const Button = $.lazy(()=>import('@antd/button.vue'))
	const Modal  = $.lazy(()=>import('@antd/modal.vue'))
	/* --------------------------- props --------------------------- */
	let modalRef = $ref()
	let codeData = $ref([])
	const onTest = () => {
		let api = window.location.origin
		let hash = window.location.hash
		hash = hash.replace('#/main','/src/views')
		api = api + hash + '.vue'
		
		fetch(api).then( res => {
			const { status, ok } = res
			if(status === 200 && ok === true){
				res.text( ).then( data => {
					if(typeof data === 'string'){
						codeData = data.split('\n')
					}
				})
			}
		})
		modalRef.open()
	}
	
</script>